<template>
  <div
    class="home-wraper without-selected"
     :class="
      isAndroid
        ? showBoxGroup
          ? 'pt-60'
          : 'pt-104'
        : showBoxGroup
        ? 'pt-44'
        : 'pt-88'
    "
  >
    <!-- 头部 -->
    <!-- <Toast v-if="firstCome" :message="$lang.tipsInit"></Toast> -->
    <div class="header-wrapper">
      <div
        class="control-top"
        :class="isAndroid ? 'mt-16' : ''"
        v-if="!showSearchBar"
      >
        <div class="user-avatar" @click="handleUserAvatarClick">
          <img alt="" :src="userInfo.photoUrl"  />
        </div>

        <van-dropdown-menu v-bind:class="dropdownBarStyle" active-color="black">
          <van-dropdown-item
            :title="mailTypeTitle"
            ref="dropdownMenu"
            @open="openDropDown"
            @close="changeArrowRotate"
          >
            <menu-set @toggleDropdownMenu="toggleDropdownMenu"></menu-set>
          </van-dropdown-item>
          <img
            :class="[rotate ? 'arrowToggle' : '']"
            :src="require('@/assets/oppo/home/arrow-down-expand.svg')"
            @click="toggleDropdownMenu"
          />
        </van-dropdown-menu>

        <div class="cancel-btn-wrap">
          <p
            class="btn-cancel-select"
            v-if="showBoxGroup"
            @click="cancelShowBox"
          >
            {{ $lang.cancel }}
          </p>
        </div>
      </div>
      <!-- 搜索栏 -->
      <div class="wholeSearchBar" v-if="!showBoxGroup && !rotate">
        <van-search
          class="searchBar"
          id="searchInput"
          v-model="searchKey"
          :show-action="false"
          :action-text="$lang.cancel"
          :placeholder="$lang.searchEmail"
          @search="ongetSearch"
          @clear="onSearchCancel"
          autocomplete="off"
        >
          <!-- :right-icon="require('@/assets/oppo/home/search-cancel.svg')" -->
          <template #left-icon>
            <div class="search-icon">
              <img :src="require('@/assets/oppo/home/searchIcon.svg')" alt="" />
            </div>
          </template>
          <!-- <div slot="action" @click="onSearch"></div> -->
        </van-search>
      </div>
      <!-- 断网提示 -->
      <div class="networkTip" v-if="isline">
        <!-- <?xml version="1.0" encoding="UTF-8"?> -->
        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>全局提示/警告@1x</title>
            <g id="20210426UI-TT移动端消息主页面+状态提示-吴意佚" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="2.1—全局提示" transform="translate(-16.000000, -119.000000)">
                    <g id="Group-2" transform="translate(0.000000, 108.000000)">
                        <g id="全局提示/警告" transform="translate(16.000000, 11.000000)">
                            <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
                            <path d="M12,2.25 C17.3847763,2.25 21.75,6.61522369 21.75,12 C21.75,17.3847763 17.3847763,21.75 12,21.75 C6.61522369,21.75 2.25,17.3847763 2.25,12 C2.25,6.61522369 6.61522369,2.25 12,2.25 Z M12.75,15.5 L11.25,15.5 L11.25,17 L12.75,17 L12.75,15.5 Z M13,7 L11,7 L11.25,14 L12.75,14 L13,7 Z" id="形状结合" fill="#F54636" fill-rule="nonzero"></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        <p class="networkText">{{$lang.offline}}</p>
      </div>
      <!--筛选、管理邮件 -->
      <FilterManageTab
        v-show="showFilterTab"
        :optionList="optionFilter"
        :selectedOption="selectedOption"
        :hideFilterContent_Prop="isTriggerhideFilterContent"
        @filterOption="filterOption"
        @triggerManage="triggerManage"
      />
    </div>

    <div class="manageCheckBoxes" v-if="showBoxGroup" :class="{ mt44:isline}">
      <div class="no-scale-left-thing">
        <van-checkbox checked-color="#06cb45" v-model="selectAll">
          <template #icon="props">
            <img
              class="img-icon"
              :src="props.checked ? activeIcon : inactiveIcon"
            />
          </template>
          <p class="no-scale-selectAll">{{ $lang.selectAll }}</p>
        </van-checkbox>
        <span v-if="$lang.selectAll != 'Select All'">{{ $lang.elect }}</span>
        <span style="color: #323233">{{ selectItem.length }}</span>
        <span>{{ $lang.emailSelected }}</span>
      </div>
      <div class="icon-group" v-if="selectItem.length">
        <div @click="batchRead">
          <img
            style="margin-left: 0"
            src="@/assets/oppo/home/hasRead.svg"
            alt=""
          />
        </div>

        <div @click="batchFollow">
          <img src="@/assets/oppo/home/needFollow.svg" alt="" />
        </div>

        <div @click="batchDelete">
          <img src="@/assets/oppo/home/needDelete.svg" alt="" />
        </div>

        <div @click="batchMove">
          <img src="@/assets/oppo/home/transferfix.svg" alt="" />
        </div>
      </div>
      <div class="icon-group" v-else>
        <div>
          <img
            style="margin-left: 0"
            src="@/assets/oppo/home/gray-manage/hasRead.svg"
          />
        </div>
        <div>
          <img
            src="@/assets/oppo/home/gray-manage/needFollow.svg"
          />
        </div>
        <div>
          <img
            src="@/assets/oppo/home/gray-manage/needDelete.svg"
          />
        </div>
        <div>
          <img src="@/assets/oppo/home/gray-manage/fixIcon.svg" />
        </div>
      </div>
    </div>

    <!-- 自定义scroll组件 用于下拉 -->
    <Scroll
      :on-refresh="watchRefresh"
      :on-infinite="onInfinite"
      :offset="15"
      :class="getClassPt"
      v-if="!showBoxGroup && !isForbidPulling"
    >
      <div id="mailListContainer">
        <van-list
          ref="vanList"
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :finished-text="finishedText"
          :loading-text="$lang.loading"
          v-if="mailList[mailType] && mailList[mailType].length"
          @load="onLoad"
          class="mail-list-wraper"
        >
          <van-checkbox-group v-model="selectItem" ref="checkboxGroup">
            <ul
              id="ul"
              v-for="(mail, index) in mailList[mailType]"
              :key="mail.index"             
            >
              <!--   -->
              <li
                class="mail-item"
                @click="handleMailItemClick(index, mail)"
                v-longpress='onLongPressMailItem'
              >
                <div class="checkbox-wrapper" v-if="showBoxGroup">
                  <van-checkbox
                    checked-color="#00C00E"
                    v-model="checked"
                    class="checkbox"
                    :name="mail.id"
                    ref="checkboxes"
                  ></van-checkbox>
                </div>
                <div class="avatar-wraper">
                  <section v-if="!isSelected" class="left">
                    <!-- <img :src="require('@/assets/oppo/home/avatarBG.svg')" />
                     -->
                    <div>
                      <div class="avatar" v-if="!mail.from || !mail.sender">
                        <template
                          v-if="
                            mailType == 'draft' ||
                            mailType == '草稿' ||
                            mailType == 'Drafts'
                          "
                        >
                          <div class="avatar" v-if="userInfo.photoUrl">
                            <img :src="userInfo.photoUrl" alt="" />
                          </div>
                          <div class="avatar" v-else>
                            {{ showUserAvart }}
                          </div>
                        </template>
                      </div>
                      <div class="avatar" v-else-if="mail.sender.photo">
                        <img :src="mail.sender.photo" alt="" />
                      </div>
                      <div class="avatar" v-else v-text="(mail.sender.name ||
            mail.sender.address ).substr(0, 1)">
                      </div>
                    </div>
                  </section>
                </div>
                <div
                  class="content-wraper"
                  :class="{ 'show-checkbox': showBoxGroup }"
                >
                  <div class="title-date-wraper">
                    <div class="title-dot-wraper">
                      <div
                      v-if="!mail.read"
                        class="status-dot"
                      ></div>
                      <div
                        v-if="
                          (mailType === 'sent' ||
                           mailType === '已发送邮件' ||
                           mailType === 'Sent Items' ||
                           mailType === 'draft' ||
                           mailType === '草稿' ||
                           mailType === 'Drafts') && !searchKey.length
                        "
                        class="title text-overflow"
                        
                      >
                        {{ mail.toRecipients | flatArrKey }}
                      </div>
                      <div
                        class="title text-overflow"
                        v-html="mail._hightLightSender"
                        v-else
                      ></div>
                    </div>
                    <div class="date">
                      <span>{{
                        dateSpecial(mail.receivedDateTime || mail.sentDateTime)
                      }}</span>
                      <img
                        :src="require('@/assets/oppo/home/goto.svg')"
                        alt=""
                      />
                    </div>
                  </div>

                  <div class="content-zone">
                    <div class="subject-content-wrapper">
                      <div
                        class="subject text-overflow"
                        v-html="mail._hightLightSubject"
                      >
                        <!-- {{ mail.subject || "该邮件无主题" }} -->
                      </div>
                      <div class="content text-overflow">
                        {{
                          mail.bodyPreview
                            ? bodyPreview(mail.bodyPreview)
                            : $lang.noContent
                        }}
                      </div>
                    </div>
                    <div class="right-icon-wrapper">
                      <div class="placehodl-attach">
                        <div class="attach-wrapper">
                          <img
                            class="attach"
                            v-if="mail.hasAttachments"
                            src="@/assets/oppo/attach.svg"
                            alt=""
                          />
                        </div>
                      </div>
                      <img
                        class="collectStar"
                        src="@/assets/oppo/follow.svg"
                        alt=""
                        v-if="mail.follow"
                        @click.stop="collectMail(mail)"
                      />
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </van-checkbox-group>
        </van-list>
        <Skeleton
          v-if="
            mailList[mailType] && mailList[mailType].length === 0 && isLoading
          "
        ></Skeleton>

        <van-empty
          :image="require('@/assets/oppo/empty-image-default.png')"
          :description="$lang.noEmail"
          v-if="
            mailList[mailType] &&
            mailList[mailType].length === 0 &&
            !ispullLoading &&
            !isLoading
          "
        />
      </div>
    </Scroll>
    <!-- 在管理时 || 检索时， 防止用户下拉刷新 -->
    <div
      id="mailListContainerElse"
      style="overflow: auto; height: 100%"
      v-if="showBoxGroup || isForbidPulling"
      :class="showBoxGroup || searchKey ? 'padding-top: 0' : 'pt-44'"
    >
      <van-list
        ref="vanList"
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :finished-text="finishedText"
        v-if="mailList[mailType].length"
        @load="onLoad"
        class="mail-list-wraper"
      >
        <van-checkbox-group v-model="selectItem" ref="checkboxGroup">
          <ul
            id="ul"
            v-for="(mail, index) in mailList[mailType]"
            :key="mail.index"
          >
            <!--   -->
            <li
              class="mail-item"
              @click="handleMailItemClick(index, mail)"
              v-longpress='onLongPressMailItem'
            >
              <div class="checkbox-wrapper" v-if="showBoxGroup">
                <van-checkbox
                  checked-color="#00C00E"
                  v-model="checked"
                  class="checkbox"
                  :name="mail.id"
                  ref="checkboxes"
                >
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="props.checked ? activeIcon : inactiveIcon"
                    />
                  </template>
                </van-checkbox>
              </div>
              <div class="avatar-wraper">
                <section v-if="!isSelected" class="left">
                  <!-- <img :src="require('@/assets/oppo/home/avatarBG.svg')" />
                     -->
                  <div>
                    <div class="avatar" v-if="!mail.from || !mail.sender">
                      <template
                        v-if="
                          mailType == 'draft' ||
                          mailType == '草稿' ||
                          mailType == 'Drafts'
                        "
                      >
                        <div class="avatar" v-if="userInfo.photoUrl">
                          <img :src="userInfo.photoUrl" alt="" />
                        </div>
                        <div class="avatar" v-else>
                          {{ showUserAvart }}
                        </div>
                      </template>
                    </div>
                    <div class="avatar" v-else-if="mail.sender.photo">
                      <img :src="mail.sender.photo" alt="" />
                    </div>
                    <div class="avatar" v-else v-text="(mail.sender.name ||
            mail.sender.address ).substr(0, 1)">
                    </div>
                  </div>
                </section>
              </div>
              <div
                class="content-wraper"
                :class="{ 'show-checkbox': showBoxGroup }"
              >
                <div class="title-date-wraper">
                  <div class="title-dot-wraper">
                    <div
                    v-if="!mail.read"
                      class="status-dot"
                    ></div>
                    <div
                      v-if="
                        (mailType === 'sent' ||
                           mailType === '已发送邮件' ||
                           mailType === 'Sent Items' ||
                           mailType === 'draft' ||
                           mailType === '草稿' ||
                           mailType === 'Drafts') && !searchKey.length
                      "
                      class="title text-overflow"
                      style="max-width: 150px"
                    >
                      {{ mail.toRecipients | flatArrKey }}
                    </div>
                    <div
                      class="title text-overflow"
                      style="max-width: 150px"
                      v-else
                      v-html="mail._hightLightSender"
                    ></div>
                  </div>
                  <div class="date">
                    <span>{{
                      dateSpecial(mail.receivedDateTime || mail.sentDateTime)
                    }}</span>
                    <img :src="require('@/assets/oppo/home/goto.svg')" alt="" />
                  </div>
                </div>

                <div class="content-zone">
                  <div class="subject-content-wrapper">
                    <div
                      class="subject text-overflow"
                      v-html="mail._hightLightSubject"
                    >
                      <!-- {{ mail.subject || "该邮件无主题" }} -->
                    </div>
                    <div class="content text-overflow">
                      {{
                        mail.bodyPreview
                          ? bodyPreview(mail.bodyPreview)
                          : $lang.noContent
                      }}
                    </div>
                  </div>
                  <div class="right-icon-wrapper">
                    <div class="placehodl-attach">
                      <div class="attach-wrapper">
                        <img
                          class="attach"
                          v-if="mail.hasAttachments"
                          src="@/assets/oppo/attach.svg"
                          alt=""
                        />
                      </div>
                    </div>

                    <img
                      class="collectStar"
                      src="@/assets/oppo/follow.svg"
                      alt=""
                      v-if="mail.follow"
                      @click.stop="collectMail(mail)"
                    />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </van-checkbox-group>
      </van-list>
      <Skeleton v-if="!mailList[mailType].length && isLoading"></Skeleton>

      <van-empty
        :image="require('@/assets/oppo/empty-image-default.png')"
        :description="$lang.noEmail"
        v-if="!mailList[mailType].length && !ispullLoading && !isLoading"
      />
    </div>
    <transition name="van-slide-down">
      <div class="first-loading" v-if="firstLoading && !ispullLoading">
        <van-loading style="font-size: 12px">{{
          $lang.tipsRefresh
        }}</van-loading>
      </div>
    </transition>

    <div id='addbottom' class="write-bt-wraper" ref="addbottom" @click="goToWriteMail" v-if="!showBoxGroup">
      <img src="@/assets/oppo/home/write.svg" />
    </div>
  </div>
</template>

<script>
import { changeTabRead, checkPoint, addWatermarkImg } from "@/utils/helper";
import Scroll from "@/plugins/scroll/scroll.vue";
import Skeleton from "@/components/Skeleton.vue";
import Toast from "@/plugins/Toast/Toast";
import { folderIdMap, mailTypeMap } from "@/config/menu.js";
import { mapGetters, mapMutations } from "vuex";
import { dateFormatSpecial } from "@/utils/helper";
import MenuSet from "@/components/MenuSet.vue";
import FilterManageTab from "@/components/filterManage.vue";
import JSBridge from "@/utils/bridge";
import { isAndroidDevice, isIOSMobile } from "@/utils/helper.js";

import {debounceTimes, getFontScale} from '@/utils/CommonUtil';

export default {
  name: "Home",
  components: {
    Skeleton,
    Toast,
    MenuSet,
    FilterManageTab,
    Scroll,
  },
  filters: {
    flatArrKey(arr) {
      if (arr && Array.isArray(arr) && arr.length) {
        const _tmp = arr.map((i) => i?.name || i?.address || "");
        return _tmp.reduce((pre, cur) => `${pre}, ${cur}`);
      }
      return "-";
    },
  },
  computed: {
    ...mapGetters([
      "folderInfo",
      "currentFolderList",
      "checkboxSelectArr",
      "inboxUnreadCount",
    ]),
    mailType: {
      get() {
        return this.$store.state.mailType;
      },
      set(v) {
        this.SAVEMAILTYPE(v);
      },
    },
    hasCollect() {
      if (this.mailType && this.mailType === "all") {
        return true;
      }
      return false;
    },
    mailTypeTitle() {
      const titleMap = mailTypeMap;
      if (this.unreadCount > 0) {
        if (this.mailType == "all") {
          return `${titleMap[this.mailType]}(${this.unreadCount})`;
        } else if (titleMap[this.mailType]) {
          return `${titleMap[this.mailType]}`;
        } else {
          return `${this.customFolderName}(${this.unreadCount})`;
        }
      } else {
        return titleMap[this.mailType] || this.customFolderName;
      }
    },
    // 获取用户本身数据，用于草稿头像的使用
    showUserAvart() {
      let avatar =
        this.userInfo.username.substr(0, 1) ||
        this.userInfo.mail.substr(0, 1) ||
        "";
      return avatar;
    },
    // 列表margin-top的class赋值
    getClassPt(){
      if(this.isAndroid){
        if(!this.isline){
          return this.showFilterTab?'pt-148': 'pt-104'
        }else{
          return this.showFilterTab?'pt-188': 'pt-104'
        }
      }else{
        if(!this.isline){
          return this.showFilterTab?'pt-132': 'pt-88'
        }else{
          return this.showFilterTab?'pt-176': 'pt-104'
        }
      }
    },
    mailItemHeight() {
      const scale = getFontScale();
      const scaleHeight = scale * 88;
      console.warn("scaleHeight", scaleHeight)
      return scaleHeight + 'px';
    },
    dropdownBarStyle(){
      if(isIOSMobile()) {
        return 'no-scale-dropdown-bar';
      }
      return 'dropdown-bar';
    }
  },
  watch: {
    selectItem(newV) {
      if (newV) {
        this.SAVECHECKBOXSELECTARR(this.selectItem);
      }
    },
    //延时调用搜索接口
    searchKey(newV) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if(!newV){
        clearTimeout(this.timer);
        this.onSearchCancel();
        return;
      }
      this.timer = setTimeout(() => {
        if(!newV){
          this.onListRefresh();
        }else{

          this.ongetSearch();
        }
      }, 500);
    },
    mailType(newValue) {
      if (newValue) {
        console.warn("watch mailType newValue的执行-----");
        this.isTriggerhideFilterContent = true;
        setTimeout(() => {
          this.isTriggerhideFilterContent = false;
        }, 0);
        this.f_type = "";
        this.selectedOption = this.optionFilter[0].option;
        this.isForbidPulling = false;
        this.selectItem = [];
        this.selectAll = false;
        this.pageInfo.nextUrl = "";
        // this.mailList[this.mailType] = [];
        // this.$set(this.mailList, this.mailType, []);
        this.setMailList(newValue, []);
        this.finished = false;
        this.firstLoading = true;
        this.searchKey = "";
        this.getMainPageMails("refresh");
      }
    },
    selectAll(newV) {
      // console.warn('select all ',newV)
      if (this.$refs?.checkboxGroup) {
        if (newV == true) {
          // console.warn('toggle true')
          this.$refs?.checkboxGroup?.toggleAll(true);
        } else {
          // console.warn('toggle false')
          this.$refs?.checkboxGroup?.toggleAll(false);
        }
      }
    },
    showBoxGroup(newV) {
      if (!newV) {
        if (this.$refs?.checkboxGroup) {
          this.selectItem = [];
          this.$refs?.checkboxGroup?.toggleAll(false);
        }
      } else {
        this.f_type = "";
        this.selectedOption = this.optionFilter[0].option;
        this.showSearchBar = false;
      }
    },
    showSearchBar(newV) {
      if (newV) {
        if (this.searchKey === "") {
          this.f_type = "";
          this.selectedOption = this.optionFilter[0].option;
        }
        // this.f_type
      } else {
        this.f_type = "";
        this.selectedOption = this.optionFilter[0].option;
      }
    },
  },
  data() {
    return {
      // 适配写邮件按钮底部绝对距离
      addbottom:"64px",
      userInfo: JSON.parse(window.localStorage.getItem("omail_userInfo")),
      selectedOption: this.$lang.all,
      optionFilter: [
        { option: this.$lang.all },
        { option: this.$lang.unread },
        { option: this.$lang.followMail },
        { option: this.$lang.attachment },
      ],
      customFolderName: "",
      unreadCount: 0,
      loading: false,
      isLoading: false,
      finished: false,
      finishedText: this.$lang.noMore,
      searchKey: "",
      selectItem: [],
      ispullLoading: false,
      isSelected: false,
      pageInfo: {
        pageSize: 20,
        nextUrl: "",
      },
      mailList: {
        all: [],
        follows: [],
        draft: [],
        sent: [],
        deleted: [],
      },
      folderIdMap: folderIdMap,
      firstLoading: true,
      firstCome: false,
      // 菜单栏
      showSearchBar: false,
      showFilterTab: true,
      touchTimer: -1,
      selectAll: false,
      showBoxGroup: false,
      isTriggerhideFilterContent: false,
      f_type: "",
      isForbidPulling: false,
      checked: false,
      rotate: false,
      activeIcon: require("@/assets/oppo/home/change-icon.svg"),
      inactiveIcon: require("@/assets/oppo/home/changes-icon.svg"),
      isAndroid: isAndroidDevice(),
      timer: null,
      isline:false,

    };
  },


  methods: {
    ...mapMutations([
      "SAVEMAILTYPE",
      "SAVEFOLDERINFO",
      "SAVECURRENTFOLDERLIST",
      "SAVECURRENTLISTNEXTURL",
      "SAVECHECKBOXSELECTARR",
      "SAVEINBOXUNREADCOUNT",
    ]),

    // 测试jsq桥是否发送
    //  getticket(){
    //    window.qing.call("getTicket",{
    //     signUrl:'/mail-office365-exchange/base/jsapi/generatesignature',
    //     signMethod: 'post',
    //       // appId:"11009",
    //       success (e) {
    //       console.warn(e.data.ticket,"方式1调用成功了")
    //       },
    //       error (error) {
    //       console.warn(error,"调用方式1 失败！")
    //       }
    //   })
    //    window.qing.call("getTicket",{
    //     // signUrl:'/mail-office365-exchange/base/jsapi/generatesignature',
    //     // signMethod: 'post',
    //       appId:"11009",
    //       success (e) {
    //       console.warn(e.data.ticket,"方式2调用成功了")
    //       },
    //       error (error) {
    //       console.warn(error,"调用方式2 失败！")
    //       }
    //   })
    //   window.qing.call("getTicket",{
    //     // signUrl:'/mail-office365-exchange/base/jsapi/generatesignature',
    //     // signMethod: 'post',
    //     appId:"11009"
    //     },(res)=>{
    //       console.warn(res,"调用方式3");
    //     })
    // },
    //节流
    // throttle(fn, interval) {
    //   let _self=fn, timer,
    //     firstTime = true;

    //   // console.warn('arguments:!', arguments)
    //   // let args = arguments, _me = this
    //   return function(){

    //     if (firstTime) {
    //       // _self.apply(_me, args)
    //       _self();
    //       return (firstTime = false);
    //     }
    //     if (timer) {
    //       return false;
    //     }
    //     timer = setTimeout(function () {
    //       clearTimeout(timer);
    //       timer = null;
    //       _self()
    //       // this.onSearch();
    //     }, interval || 500);
    //   }
    // },
    changeArrowRotate() {
      this.rotate = !this.rotate;
      console.warn("这是收起", this.rotate);
    },
    senderHTML(mail) {
      const s =
        mail?.sender === null
          ? "-"
          : mail?.sender?.name === null
          ? mail?.address
          : mail?.sender?.name;
      return s;
    },

    //管理取消按钮
    cancelShowBox() {
      this.selectAll = false;
      this.searchKey = "";
      if (this.searchKey) {
        this.isForbidPulling = true;
        this.showFilterTab = false;
      } else {
        this.isForbidPulling = false;
        this.showFilterTab = true;
      }

      //筛选（eg. 关注）后，点进详情页，会save一次currentFolderList， 再回到此页面管理，然后取消

      //在主页进行筛选-》管理->取消后，直接还原展示vuex中的列表
      // if(this.f_type==''){
      //   this.selectedOption=this.optionFilter[0].option
      // }
      // this.mailList[this.mailType] = [...this.$store.state.currentFolderList];
      this.pageInfo.nextUrl = "";

      this.getMainPageMails("refresh");
      this.showBoxGroup = false;
    },

    triggerManage() {
      this.showFilterTab = false;
      this.showBoxGroup = true;
    },

    async batchRead() {
      const arrIds = this.selectItem;
      this.$toast.loading({
        message: this.$lang.loading,
        // message: "",
        forbidClick: true,
        duration: 0,
      });
      try {
        const res = await this.Api.batchRead({
          ids: arrIds,
        });
        const { success } = res?.data;
        if (success) {
          this.selectItem = [];
          this.cancelShowBox();
        }
        this.$toast.success(this.$lang.successRead)
        this.onSearch();
      } catch(e){
        console.error("批量已读失败",e);
      }
      // this.onSearch();
    },
    async batchFollow() {
      const arrIds = this.selectItem;
      // this.$toast.loading({
      //   message: this.$lang.loading,
      //   // message: "",
      //   forbidClick: true,
      //   duration: 0,
      // });
      try {
        const res = await this.Api.batchFollow({
          ids: arrIds,
        });
        const { success } = res?.data;
        if (success) {
          this.$toast.success(this.$lang.successMark);
          this.showBoxGroup = false;
          this.selectItem = [];
          this.selectAll = false;
          this.showFilterTab = true;
          this.mailList[this.mailType].forEach((item) => {
            if (arrIds.includes(item.id)) {
              item.follow = true;
            }
          });
        }
        this.onSearch();
      } catch(err){
        // this.$toast.clear()
        console.error("批量关注失败",err);
      }
      // this.onSearch();
    },
    async batchDelete() {
      // this.$toast.loading({
      //   message: this.$lang.loading,
      //   forbidClick: true,
      //   duration: 0,
      // });
      const arrIds = this.selectItem;

      const curType = this.folderInfo.folderId;
      let res = {};
      try {
        //已删除文件夹内的话直接删除，否则先移动到已删除文件夹
        if (
          curType === "deleteditems" ||
          this.mailType === "已删除邮件" ||
          this.mailType === "Deleted Items"
        ) {
          res = await this.Api.batchDelete({
            ids: arrIds,
          });
        } else {
          res = await this.Api.batchMoveDel({
            folderId: "deleteditems",
            ids: arrIds,
          });
        }
        // 判断弹窗是否点击了是（点击否会返回空值，res为undefined报错）
        if(res){
          const { success } = res?.data;
          if (success) {
            console.warn('跑到这了');
            this.$imbedapi(666001003, "delMail").then((res) =>
              console.warn(res, "邮件删除")
            );
            this.$toast.success(this.$lang.successDelete);
            // this.$toast.clear();
            this.showBoxGroup = false;
            this.selectItem = [];
            this.selectAll = false;
            this.showFilterTab = true;

            arrIds.forEach((itemId) => {
              this.mailList[this.mailType].forEach((item, index) => {
                if (item.id === itemId) {
                  this.mailList[this.mailType].splice(index, 1);
                }
              });
            });
            this.onSearch();
          }
        }
        
      } catch(e) {
        // this.$toast.clear()
        e === 600 ? console.error("批量删除失败",e): console.warn("接口返回错误");
      }
    },
    async batchMove() {
      console.warn("batchMove----");
      this.$store.commit("forbidMove", false);
      setTimeout(() => {
        if (this.selectItem.length) {
          this.showFilterTab = true;
          this.$router.push("/folderManage");
        }
      }, 0);

    },
    onLongPressMailItem () {
      this.showBoxGroup = true;
      this.showFilterTab = false;
    },

    handleMailItemClick(index, mail){
      console.warn("这是点击");
      if(document.getElementById("searchInput")){
        document.getElementById("searchInput").blur()
      }
      const fArr = new Set(["NOT_READ", "FOLLOW", "HAS_ATTACH"]);
      // console.warn("searchKe");
      // if (this.searchKey.length || fArr.has(this.f_type)) {
      //this.searchKey.length 导致bug 但是不知道有啥用
      if (fArr.has(this.f_type)) {
        console.warn("frr has this.f_type");

        this.SAVECURRENTFOLDERLIST(this.mailList[this.mailType]);
        this.SAVECURRENTLISTNEXTURL(null);
        this.goTo(index, mail);
        return;
      }
      console.warn("frr has no this.f_type");

      if (this.showBoxGroup) {
        console.warn("this.showBoxGroup is true");

        this.$refs.checkboxes && this.$refs.checkboxes[index].toggle();
      } else {
        console.warn("this.showBoxGroup is false");
        this.goTo(index, mail);
      }
    },

    watchRefresh(done, type) {
      // if (type === "triggerFilterTab") {
      //   setTimeout(() => {
      //     done();
      //   }, 500);
      //   this.showFilterTab = true;
      // } else

      if (type === "triggerVanList") {
        const status = this.onListRefresh("noLoading");

        setTimeout(() => {
          done(status);
        }, 500);
      }
    },
    onInfinite(done) {
      console.log(1);
      setTimeout(() => {
        done(0);
      });
    },
    filterOption(selectedOption) {
      this.pageInfo.nextUrl = "";
      this.finished = false;
      this.selectedOption = selectedOption;
      this.filterAction();
    },
    filterAction() {
      this.mailList[this.mailType] = [];
      this.isLoading = true;
      const f_typeList = ["ALL", "NOT_READ", "FOLLOW", "HAS_ATTACH"];
      const index = this.optionFilter.findIndex(
        (item) => item.option === this.selectedOption
      );
      this.f_type = f_typeList[index];

      // switch (this.selectedOption) {
      //   case "全部":
      //     this.f_type = "ALL";
      //     break;
      //   case "未读":
      //     this.f_type = "NOT_READ";
      //     break;
      //   case "关注":
      //     this.f_type = "FOLLOW";
      //     break;
      //   case "附件":
      //     this.f_type = "HAS_ATTACH";
      //     break;
      // }

      this.filterSend();
    },
    setMailList(mailType, list) {
      if (Array.isArray(list)) {
        let newL = list.map((item) => {
          item._senderPhoto = (
            item?.sender?.name ||
            item?.sender?.address ||
            " "
          ).substr(0, 1);
          item._hightLightSubject = item?.subject || this.$lang.noSubject;
          item._hightLightSender =
            item?.sender === null
              ? "-"
              : item?.sender.name === null
              ? item?.address
              : item?.sender.name;
          return item;
        });

        this.$set(this.mailList, mailType, newL);
        // const toRecipients = item.toRecipients ? item.toRecipients[0] : {};
        // item._recipientPhoto = (
        //   toRecipients?.name ||
        //   toRecipients ||
        //   "-"
        // ).substr(0, 1);
      } else {
        this.mailList[mailType] = [];
      }
    },
    async filterSend() {
      const requestBody = {
        ...this.pageInfo,
        folderId: this.folderInfo.folderId || "inbox",
        searchType: this.f_type,
      };
      try {
        const res = await this.Api.listMeByFolderId(requestBody);
        const { success, data } = res?.data;
        if (success) {
          this.pageInfo.nextUrl = data?.nextUrl;
          const arr = data?.list;
          if (arr.length === 0) {
            this.ispullLoading = false;
          } else {
            this.setMailList(
              this.mailType,
              this.mailList[this.mailType].concat(arr)
            );
          }
          this.isLoading = false;
          this.loading = false;
          if (this.f_type === "ALL") {
            this.isForbidPulling = false;
          } else {
            this.isForbidPulling = true;
          }
          if (!data?.nextUrl) {
            this.finished = true;
          }
        } else {
          this.$notify({
            message: this.$lang.errorServer,
            duration: 1000,
          });
          this.loading = false;
          this.finished = true;
          this.finishedText = this.$lang.errorServer;
        }
      } catch {
        this.loading = false;
        this.finished = true;
        this.finishedText = this.$lang.errorServer;
        console.error("筛选邮件失败");
      }
    },
    bodyPreview(mail) {
      return mail.replace(/[\r\n_-]|(&nbsp;)/g, "").substring(0, 40);
    },
    async getCountInfo() {
      console.warn("getCountInfo-----");
      try {
        console.warn("调用时的",this.folderInfo);
        const eachRes = await this.Api.getFolderInfo(this.folderInfo.folderId);
        const { success, data } = eachRes?.data;
        if (success) {
          this.unreadCount = data.unreadItemCount;
          if (this.folderInfo.folderId === "inbox") {
            this.SAVEINBOXUNREADCOUNT(data.unreadItemCount);
            this.$eventBus.$emit("getCountInfo", this.inboxUnreadCount);
            setTimeout(() => {  // yan chi jiekou diaoyong, bimian tong yi shi jian diaoyong duoci jiekou
              checkPoint(data.unreadItemCount); //红点相关
              // console.warn("888");
            }, 3000);
          } else {
            this.$eventBus.$emit("getCountInfo", this.inboxUnreadCount);
          }
        }
      } catch {
        console.error(`获取文件夹未读数量失败`);
      }
    },
    async openDropDown() {
      console.warn("openDropDown----这是");
      this.rotate = !this.rotate;
      this.$store.commit("forbidMove", true);
      this.showBoxGroup = false;
      this.showFilterTab = true;
      this.selectAll = false;
      this.$toast.loading(this.$lang.loading)
      await this.getCountInfo();
      // console.error("555")
      this.$toast.clear()
      this.$eventBus.$emit("getCurrentFolder");
    },
    toggleDropdownMenu() {
      console.warn("toggleDropdownMenu----");
      this.$store.commit("forbidMove", true);
      this.showBoxGroup = false;
      this.showFilterTab = true;
      this.selectAll = false;
      this.getCountInfo();
      // console.error("444")
      this.$eventBus.$emit("getCurrentFolder");
      this.$refs.dropdownMenu.toggle();
    },
    dateSpecial(date) {
      return dateFormatSpecial(date);
    },

    setLocalStorage() {
      localStorage.setItem("closeExpireNotice", this.closeExpireNotice);
    },
    goToWriteMail() {
      // this.$router.push({
      //   path: "/writemail",
      //   query: {
      //     writeType: "new",
      //   },
      // });
      this.openWebView(`writemail`, {
        writeType: "new",
      });
    },
    cancelSelect() {
      this.isSelected = false;
    },
    // searchWithThrottle() {
    //   console.warn("searchWithThrottle");
    //   const fn = this.onSearch
    //   const fnafter = this.throttle(fn, 2000);
    //   fnafter()
    // },
    //后端搜索
     async ongetSearch() {
      this.pageInfo.nextUrl = "";
      this.isTriggerhideFilterContent = true;
      setTimeout(() => {
        this.isTriggerhideFilterContent = false;
      }, 0);
      this.f_type = "";
      this.selectedOption = this.optionFilter[0].option;
      if (this.searchKey) {
        this.isForbidPulling = true;
        this.showFilterTab = false;
      } else {
        this.isForbidPulling = false;
        this.showFilterTab = true;
      }
      try {
        if(!this.isline){
          this.$toast.loading({
            message: this.$lang.loading,
            forbidClick: true,
            duration: 0,
          });
        }
        const res = await this.getMainPageMails("search");
        if(res != 600){
          console.warn(res);
          const { list } = res?.data?.data;
          console.warn("onSearchCancel res: ", list);
          let searchList = [...list];
          this.$set(this.mailList, this.mailType, searchList);
          this.highLight();
          this.$toast.clear();
        }
      } catch(e){
        if(e != 600){
          this.$toast.clear();
        }
        console.error("搜索失败",e);
      }
      try{
        console.warn("behavior obj")
        window.scrollTo({top: 0, behavior: "instant"});
      }catch(e){
        console.warn("behavior 0,0")
        window.scrollTo(0, 0);
      }
    },
    // 改变home页面邮件列表及状态
    async onSearch() {
      this.pageInfo.nextUrl = "";
      this.isTriggerhideFilterContent = true;
      setTimeout(() => {
        this.isTriggerhideFilterContent = false;
      }, 0);
      this.f_type = "";
      this.selectedOption = this.optionFilter[0].option;
      if (this.searchKey) {
        this.isForbidPulling = true;
        this.showFilterTab = false;
      } else {
        this.isForbidPulling = false;
        this.showFilterTab = true;
      }
      try {
        const res = await this.getMainPageMails("search");
        const { list } = res?.data?.data;
        console.warn("onSearchCancel res: ", list);
        let searchList = [...list];

        // 完成搜索后
        // this.mailList[this.mailType] = [...searchList].map((item) => {
        //   let obj = {
        //     ...item,
        //     sender: {
        //       ...item.sender,
        //     },
        //   };
        //   return obj;
        // });
        this.$set(this.mailList, this.mailType, searchList);
        // const mt = this.mailType
        // this.mailList = Object.assign({},this.mailList,{mt: searchList})
        this.highLight();
      } catch {
        console.error("搜索失败");
      }
      try{
        console.warn("behavior obj")
        window.scrollTo({top: 0, behavior: "instant"});
      }catch(e){
        console.warn("behavior 0,0")
        window.scrollTo(0, 0);
      }
    },
   
    highLight() {
      let list = this.mailList[this.mailType];
      if (this.searchKey.length) {
        let regList = [
          {
            reg: "<",
            text: "&lt;",
            dot: "g",
          },
          {
            reg: ">",
            text: "&gt;",
            dot: "g",
          },
          {
            reg: this.searchKey,
            text: '<span style="color: #00c00e;">$&</span>',
            dot: "gi",
          },
        ];
        list.map((j) => {
          regList.map((i) => {
            const regArr = [];
            i.reg &&
              i.reg.split(" ").map((item) => {
                item && regArr.push(`(${item})`);
              });
            let regStr = regArr.join("|");
            let reg = new RegExp(regStr, i.dot);
            j._hightLightSubject = (j.subject || "").replace(reg, i.text);
            if(
              this.mailType === "draft" || this.mailType === "sent" || this.mailType === "已发送邮件" || 
              this.mailType === "Sent Items" || this.mailType === "草稿" || this.mailType === "Drafts"
            
            ){
              let _tmp = "";
              if(j.toRecipients.length > 0){
                _tmp = j.toRecipients.map((i) => i?.name || i?.address || "");
                _tmp = _tmp.reduce((pre, cur) => `${pre}, ${cur}`);
              }
              j._hightLightSender = (_tmp || "-").replace(reg, i.text);
            }else{
              j._hightLightSender = (j.sender?.name || "").replace(reg, i.text);
            }
          });
        });
      } else {
        list.map((j) => {
          j._hightLightSubject = j.subject || this.$lang.noSubject;
          j._hightLightSender =
            j?.sender === null
              ? "-"
              : j?.sender.name === null
              ? j?.address
              : j?.sender.name;
        });
      }
    },
    //搜索取消按钮
    onSearchCancel() {
      console.warn("onSearchCancel");
      this.searchKey = "";
      this.f_type = "ALL";
      this.selectedOption = this.optionFilter[0].option;
      this.showSearchBar = false;
      this.isForbidPulling = false;
      this.showFilterTab = true;
      this.ongetSearch();
      // this.mailList[this.mailType] = [...this.$store.state.currentFolderList];
      // this.pageInfo.nextUrl = this.$store.state.currentListNextUrl;
      // if (this.pageInfo.nextUrl) {
      //   this.finished = false;
      // }
    },
    async onLoad() {
      if (this.finished || this.ispullLoading) {
        return;
      }

      this.loading = true;
      let res = {};
      try {
        if (this.f_type === "ALL" || this.f_type === "") {
          if (this.searchKey.length) {
            res = await this.getMainPageMails("search");
          } else {
            res = await this.getMainPageMails();
          }
          console.warn("onload res", res);
          const { success, error } = res?.data;
          // let success = false //test
          if (!success) {
            // this.pageInfo.nextUrl = "";
            this.$notify({
              message: this.$lang.errorServer,
              duration: 1000,
            });
            this.loading = false;
            this.finished = true;
            this.finishedText = this.$lang.errorServer;
            return false;
          } else {
            if (this.searchKey.length) {
              this.highLight();
            }
          }
          this.loading = false;
        } else {
          this.filterSend();
        }
      } catch(e) {
        console.error("加载更多失败：",e);
        this.loading = false;
        this.finished = true;
        this.finishedText = this.$lang.errorServer;
        // this.pageInfo.nextUrl = "";
      }
    },
    goTo(index, mail) {
      console.warn("goTo~~~~~~~~~",mail);
      mail.read = true; //设置已读
      try{
        const mail_Type =JSON.parse(localStorage.getItem("omail_folderInfo"))
        console.warn("parse success",mail_Type);
        localStorage.setItem("mail_Type",mail_Type.type)
        console.warn("save success");
      }catch{
        // this.$imbedapi(666001005, `::::::goto err1`)
        console.warn("goTo err1")
      }

      console.warn("this.showBoxGroup开关", this.showBoxGroup)
      if (this.showBoxGroup) {
        // console.warn("返回了一个空,不跳转",);
        console.warn("this.showBoxGroup is true, return");
        return;
      }

      // this.RouterPush(`'/emaildetail'/${mail.id}`, {
      //   index,
      // });
      this.$store.commit("changeShowReply", false);
      if (
        this.mailType === "draft" ||
        this.mailType === "草稿" ||
        this.mailType === "Drafts"
      ) {
        // console.warn(mail.id);
        console.warn("go to writemail");

        this.openWebView(`writemail/${mail.id}`, {
          writeType: "draft",
        });
      } else {
        // changeTabRead()//红点
        console.warn("go to emaildetail");

        this.openWebView(`emaildetail/${mail.id}`, {
          index: index,
        });
      }
    },
    async onListRefresh(type) {
      const state = type != "noLoading";
      if(state){
        this.$toast.loading({
          message: this.$lang.loading,
          forbidClick: true,
          duration: 0,
        });
      }
      
      this.pageInfo.nextUrl = "";
      this.ispullLoading = true;
      this.finished = false;
      this.loading = false;
      try {
        // eslint-disable-next-line no-unused-vars
        const res = await this.getMainPageMails("refresh");
        this.ispullLoading = false;
        const { success } = res?.data;
        if(state){
          this.$toast.clear();
        }
        if (success) {
          return true;
        }
      } catch {
        if(state){
          this.$toast.clear();
        }
        this.ispullLoading = false;
        return false;
      }
    },

    /* oppo  api*/
    async getMainPageMails(type = "addition") {
      console.warn("getMainPageMails的执行------");
      let mailType = this.mailType;

      const customName = this.folderInfo.customName;
      this.customFolderName = customName;

      const folderId = this.folderInfo.folderId;

      this.isLoading = true;

      const requestBody = {
        ...this.pageInfo,
        folderId: folderId || "inbox",
        searchType:'ALL',
      };
      if (type == "search") {
        requestBody["keyWord"] = this.searchKey;
      }

      try {
        const res = await this.Api.listMeByFolderId(requestBody);
        console.warn("listMeByFolderId finished")
        const { success, data } = res?.data;

        this.firstLoading = false;
        if (this.firstCome) {
          window.localStorage.setItem("omail_mailFirstCome", false);
          this.firstCome = false;
        }

        if (success) {
          console.warn("listMeByFolderId success")

          this.isLoading = false;
          if (type === "refresh") {
            console.warn("type === refresh")

            this.mailList[mailType] = [];
          }

          this.getCountInfo();
          // console.error("333")
          const list = data?.list;
          this.pageInfo.nextUrl = data?.nextUrl;

          if (list.length) {

            //防注入  接口数据出口处直接处理
            list.forEach((item)=>{
              const reg = /&lt;a|&lt;img|&lt;div|&lt;p|&lt;h1|&lt;h2|&lt;h3|&lt;h4|&lt;h|&lt;b|&lt;i|&lt;br|&lt;hr|&lt;li|&lt;script|&lt;link|&lt;svg|&lt;table|&lt;picture|&lt;map|alert|&lt;\/|&lt;span/ig
              if(item.subject){
                item.subject = item.subject.replace(reg , "")
              }
            })

            //搜索时 把搜索结果列表作为缓存数据
            if(type == "search"){
              this.mailList[mailType] = list;
            }else{
              this.setMailList(
                this.mailType,
                this.mailList[mailType].concat(list)
              );
            }

            this.SAVECURRENTFOLDERLIST(this.mailList[mailType]);
            this.SAVECURRENTLISTNEXTURL(data?.nextUrl);
            this.finished = !data?.nextUrl ? true : false;
          } else {
            this.SAVECURRENTFOLDERLIST([]);
            this.SAVECURRENTLISTNEXTURL(data?.nextUrl);
            this.finished = true;
          }
          return res;
        } else {
          this.isLoading = false;
          const errorMsg =
            res?.data?.data?.error_description || this.$lang.errorSys;
          this.$notify({
            message: errorMsg,
            duration: 1000,
          });
          // throw res;
          return res;
        }
      } catch(e) {
        this.isLoading = false;
        this.firstLoading = false;
        this.finished = true;
        this.finishedText = this.$lang.errorServer;
        console.error("获取邮件失败",e);
        if(e == 600) return e
        return { data: { success: { data: "" } } };
      }
    },

    // handleUserAvatarClick: debounceTimes(function () {
    // }, 300, 5) ,
   handleUserAvatarClick(){
      JSBridge.showMeVC(true);
   }
  },
  created() {
    // this.$toast.fail({
    //         message: this.$lang.openFileConfirm,
    //         duration: 10000,
    //       });
    this.$imbedapi(666001005, "goToHome").then((res) => {
      console.warn(res, "进入home页面埋点");
    });
    addWatermarkImg("app");
    window.qing.call("setBounce", { enable: 0 });
    const firstCome = window.localStorage.getItem("omail_mailFirstCome");
    if (firstCome === null) {
      //第一次来
      this.firstCome = true;
      this.SAVEMAILTYPE("all");
      this.SAVEFOLDERINFO({
        type: "all",
        folderId: "inbox",
        customName: "all",
      });
      this.getCountInfo();
      // console.error("111")
    } else if (this.folderInfo.customName) {
      console.warn("vuex中有 直接展示vuex中的folder列表");
      //若vuex中有 直接展示vuex中的folder列表
    } else {
      //其他情况
      this.SAVEMAILTYPE("all");
      this.SAVEFOLDERINFO({
        type: "all",
        folderId: "inbox",
        customName: "all",
      });
      this.getCountInfo();
      // console.error("222")
    }

    this.getMainPageMails("refresh");

    //用于 closeWebView 后监听页面数据更新
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "visible") {
        console.warn("visible********))))))~");
        console.warn(this.checkboxSelectArr);

        const fArr = ["NOT_READ", "FOLLOW", "HAS_ATTACH"];
        const idx = fArr.findIndex((item) => item === this.f_type);
        if (idx > -1) {
          //展示原来就筛选后的列表
          // this.filterSend()
          console.warn("fArr idx", fArr[idx]);
          let index = idx + 1;
          this.selectedOption = this.optionFilter[index].option;
        } else if (this.searchKey.length) {
          //do nothing
        } else if (this.showBoxGroup) {
          this.selectItem = [...this.checkboxSelectArr];
        } else {
          //直接刷新该文件夹列表
          console.warn("refresh getMainPageMails");

          this.pageInfo.nextUrl = "";
          this.getMainPageMails("refresh");
        }
       setTimeout( () => {
          changeTabRead()
          // console.warn("999");
       },3000);
      }
    });
  },
  mounted() {
     //监听网络状态           
    window.addEventListener("online", 
    () =>{
      this.isline = false
      this.finishedText = this.$lang.noMore
      console.warn("网络连接了");
    }
    // this.updateline
    ); 
    window.addEventListener("offline", () =>{
      this.isline = true
      console.warn("网络断开了");
    });
    //事件总线监听
    this.$eventBus.$on("toggleDropdownMenu", this.toggleDropdownMenu);
    // 适配ipone全面屏
    let a = (function isIphoneX(){
      console.warn(/iphone/gi.test(navigator.userAgent),window.screen.heigh,window.devicePixelRatio);
    return /iphone/gi.test(navigator.userAgent) && (screen.height >= 812 && window.devicePixelRatio >= 2)
    })();
    if(!a){
      document.getElementById("addbottom").style.bottom = '30px'
      console.warn("非ipone全面屏手机修改底部定位为30px");
    }
    console.warn("是否为ipone全面屏：：：：",a,document.getElementById("addbottom").style.bottom);
    },

  beforeDestroy() {
    //清除上一次事件总线监听
    this.$eventBus.$off("toggleDropdownMenu");
  },
};
</script>

<style lang="less" scoped>
@import "../assets/common.less";
.pt-88 {
  padding-top: 88px;
}

.pt-44 {
  padding-top: 44px;
}

.pt-104 {
  padding-top: 100px;
}

.pt-60 {
  padding-top: 56px;
}

.mt-16 {
  margin-top: 12px;
}

.pt-132 {
  padding-top: 132px;
}
.pt-176{
  padding-top: 176px;
}
.pt-148 {
  padding-top: 144px;
}
.pt-188{
  padding-top: 188px;
}
.mt44{
  margin-top: 44px;
}
.home-wraper {
  position: relative;
  overflow: hidden;
  height: 100%;
  .user-avatar {
    position: absolute;
    left: 16px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    img {
      max-height: 32px;
      width: 32px;
      border-radius: 10px;
      -webkit-mask-image: url("~@/assets/round.svg");
      -webkit-mask-size: cover;
      pointer-events: none;
    }
  }
  
  .manageCheckBoxes {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;
    background: #fff;
    .no-scale-left-thing {
      display: flex;
      align-items: center;
      /deep/ .van-checkbox__icon {
        font-size: 18px;
      }
      .no-scale-selectAll {
        min-width: 28px;
        font-size: 16px!important;
        font-weight: 500;
      }
      span {
        font-size: 14px!important;
        color: #969799;
        line-height: 44px;
        margin-left: 8px;
      }
    }
    .icon-group {
      float: right;
      div {
        margin-left: 16px;
        display: inline-block;
      }
      img {
        pointer-events: none;
      }
    }
  }

  .header-wrapper {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 0;
    height: auto;
    z-index: 999;
    background-color: white;
  }

  .control-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    .dropdown-bar {
      // min-width: 38.2%;
      width: auto;
      // overflow: auto;
      display: flex;
      img{
        pointer-events: none;
      }
      .arrowToggle {
        transform: rotate(180deg);
      }
      /deep/ .van-dropdown-item__content {
        // min-height: 60%;
        min-height: 100%;
        max-height: 100%;
        overflow-y: auto;
      }
      /deep/ .van-dropdown-menu__bar {
        background-color: transparent;
        box-shadow: 0 0 0 #fff;
        height: 44px;
      }

      /deep/ .van-dropdown-menu__title {
        max-width: 200px;
        flex: 3;
        font-size: 20px;
        font-weight: 500;
        line-height: 0.746667rem;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      /deep/ .van-dropdown-menu__title::after {
        content: none;
      }
    }

    .no-scale-dropdown-bar {
      // min-width: 38.2%;
      width: auto;
      // overflow: auto;
      display: flex;
      img{
        pointer-events: none;
      }
      .arrowToggle {
        transform: rotate(180deg);
      }
      /deep/ .van-dropdown-item__content {
        // min-height: 60%;
        min-height: 100%;
        max-height: 100%;
        overflow-y: auto;
      }
      /deep/ .van-dropdown-menu__bar {
        background-color: transparent;
        box-shadow: 0 0 0 #fff;
        height: 44px;
      }

      /deep/ .van-dropdown-menu__title {
        max-width: 200px;
        flex: 3;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      /deep/ .van-dropdown-menu__title::after {
        content: none;
      }
    }
  }

  .wholeSearchBar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    background-color: green;

    padding: 6px 16px;
    background-color: white;
    justify-content: space-between;
    .searchBar {
      padding: 0;
      width: 100%;
      /deep/ .van-search__content {
        padding-left: 12px;
        background: #f0f0f0;
        border-radius: 4px;
        height: 32px;
        .search-icon {
          width: 20px;
          height: 20px;
          img{
            pointer-events: none;
          }
        }
        .van-field__left-icon {
          margin-right: 8px;
        }
      }
      // /deep/ .van-icon {
      //   width: 16px;
      //   height: 16px;
      // }
      .van-cell {
        line-height: 20px;
        display: flex;
        align-items: center;
      }
      .van-search__action {
        font-size: 16px;
        padding-left: 16px;
        padding-right: 0;
      }
    }
  }
  .networkTip{
    display: flex;
    height: 44px;
    padding-left: 16px;
    justify-content:flex-start;
    align-items: center;
    background-color: #FFEBEE;
  }
  .networkWarn{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .networkText{
    margin-left: 6px;
    font-size: 14px;
    color: #F54636;
    text-align: left;
    line-height: 22px;
    font-weight: 400;
  }
  .cancel-btn-wrap {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
  }

  .btn-cancel-select {
    font-size: 16px;
    color: #323233;
  }

  .filter-manage-pull {
    height: 268px;
  }

  .first-loading {
    text-align: center;
    font-size: 14px;
    padding: 10px;
    // background: #f3f3f3;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(49, 114, 149, 0.1);
    position: absolute;
    width: 100%;
    z-index: 111;
    margin-top: -1px;
    // filter: drop-shadow(rgba(14,46,70,.2) 0 10px 26px);
    /deep/ .van-loading__spinner {
      width: 15px;
      height: 15px;
    }
  }

  .write-bt-wraper {
    position: absolute;
    bottom: 64px;
    right: 30px;
    height: 52px;
    width: 52px;
    background: #00c00e;
    box-shadow: 0 4px 16px 0 rgba(60, 60, 60, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 28px;
      height: 28px;
      position: relative;
      pointer-events: none;

    }
  }
  .bottom-bt-wraper {
    width: 100%;
    height: 54px;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: #ffffff;
    box-shadow: 0 -2px 2px 0 rgba(66, 64, 86, 0.05);
    display: flex;
    .bt-wraper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        img {
          height: 28px;
          width: 28px;
          padding: 4px;
        }
        span {
          padding-top: 4px;
          font-size: 12px;
        }
        &:active {
          background: rgb(209, 209, 209);
        }
      }
      .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        img {
          height: 28px;
          width: 28px;
          padding: 4px;
        }
        span {
          padding-top: 4px;
          font-size: 12px;
        }
        &:active {
          background: rgb(209, 209, 209);
        }
      }
    }
  }
  .mail-list-wraper {
    // height: 100%;//为了腾出底部tab栏的高度
    padding-bottom: 100px;

    .mail-item {
      position: relative;
      height: 2.346669rem;
      padding: 0.3733338636356rem 0.4266672727264rem;
      display: flex;
      align-items: flex-start;
      overflow: hidden;
      &:active {
        opacity: 0.6;
      }

      .checkbox-wrapper {
        width: 20px;
        height: 100%;
        position: relative;
        overflow: hidden;
        margin-right: 12px;
        .checkbox {
          // position: absolute;
          // top: 20%;
          margin-top: 0.3200004545448rem;
          width: 0.533334090908rem;
          height: 0.533334090908rem;
          /deep/ .van-checkbox__icon {
            font-size: 18px;
          }
        }
      }
      .avatar-wraper {
        width: 44px;
        .left {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          // .avatar {
          //   height: 40px;
          //   width: 100%;
          //   border-radius: 15px;
          //   // background: #0085cc;
          //   line-height: 40px;
          //   font-size: 16px;
          //   text-align: center;
          //   color: aliceblue;
          // }
          .avatar {
            width: 44px;
            height: 44px;
            margin-top: 3px;
            // border: 1px solid #000000;
            text-align: center;
            text-transform: capitalize;
            font-size: 22px;
            line-height: 44px;
            color: #fff;
            border-radius: 17px;
            background-color: rgb(197, 194, 194);
            -webkit-mask-image: url("~@/assets/round.svg");
            -webkit-mask-size: cover;
          }
        }
        img {
          width: 44px;
          height: 44px;
          border-radius: 12px;
        }
      }
      .content-wraper {
        // width: 100%;
        // width: calc(100% - 96px);
        position: absolute;
        left: 64px;
        right: 16px;
        // bottom: 14px;
        // top: 14px;
        padding-left: 12px;
        &.show-checkbox {
          left: 96px;
        }
        .title-date-wraper {
          display: flex;
          height:0.6133342045442rem;
          line-height: 0.6133342045442rem;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          color: #323233;
          .title-dot-wraper {
            display: flex;
            // height: 100%;
            justify-content: flex-start;
            align-items: center;
            height:0.6133342045442rem;
            line-height: 0.6133342045442rem;
            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #00c00e;
              margin-right: 8px;
            }
            .title {
              font-size: 16px;
              color: #323233;
              // line-height: 16px;
              font-weight: 500;
              max-width: 180px;
            }
          }
          .date {
            min-width: 40px;
            min-height: 12px;
            font-size: 12px;
            line-height: 16px;
            color: #969799;
            img {
              margin-left: 8px;
              // padding-bottom: 2px;
              // height: 14px;
              vertical-align: middle;
              transform: translate(0,-1px);
            }
          }
        }

        .content-zone {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 1.4194686829516419rem;
          .subject-content-wrapper {
            display: flex;
            overflow: hidden;
            flex-direction: column;
            height: 1.4194686829516419rem;
            .subject {
              font-size: 14px;
              color: #323233;
              // line-height: 14px;
              font-weight: 400;
              margin-bottom: 5px;
              position: relative;
              // background: #fff;
              height: 0.533334090908rem;
              line-height: 0.533334090908rem;
            }
            .content {
              font-size: 14px;
              color: #969799;
              // line-height: 14px;
              font-weight: 400;
              overflow: hidden;
              position: relative;
              padding-right: 32px;
              // padding-bottom: 5px;
              height:0.6666676136349999rem;
              line-height: 0.6666676136349999rem;
            }
          }
          .right-icon-wrapper {
            display: flex;
            flex-direction: column;
            .attach-wrapper {
              // min-height: 26px;
              min-width: 16px;
              .attach {
                margin-top: 2px;
                width: 0.4266672727264rem;
                height: 0.4266672727264rem;
                vertical-align: middle;
                margin-bottom: 5px;
                pointer-events: none;
              }
            }
            .collectStar {
              width: 0.4266672727264rem;
              height: 0.4266672727264rem;
              pointer-events: none;

              font-size: 0.37333rem;
              color: #969799;
              font-weight: 400;
              overflow: hidden;
              position: relative;
              padding-bottom: 5px;
              line-height:0.37333rem;
              margin-top:0.0800001136362rem;
            }
          }
        }
      }
    }
  }
}
// 补充占位样式
.placehodl-attach {
  width: 0.48000068181719996rem;
  height: 0.6133342045442rem;
  font-size: 0.37333rem;
  margin-bottom: 5px;
  line-height:0.37333rem;
}

</style>
